<template>
    <div class="table">
        <el-table
                :data="tableData"
                style="width: 100%"
                >
        >
            <el-table-column
                    prop="week"
                    label="星期"
                    align="right"
                    width="51"
                   >
            </el-table-column>
            <el-table-column
                    prop="last"
                    label="上周"
                    align="right"
                   >
            </el-table-column>
            <el-table-column
                    prop="current"
                    label="当周"
                    align="right"
                   >
            </el-table-column>
            <el-table-column
                    prop="amplitude"
                    label="升降幅度"
                    align="right"
                    >
                <template slot-scope="scope">
                    <div class="item" style="margin-left: 0.05rem;float: right ">
                        <img src="@/assets/icons/electricity-up-arrow.png" alt="" v-if="parseFloat(scope.row.current)>parseFloat(scope.row.last)">
                        <img src="@/assets/icons/electricity-down-arrow.png" alt="" v-else-if="parseFloat(scope.row.current)<parseFloat(scope.row.last)">
                        <img src="@/assets/icons/electricity-arrow-none.png" alt="" v-else>
                    </div>
                    <div class="item" style="float: right" v-if="(scope.row.current-scope.row.last)/(scope.row.last)">{{(Math.round(((scope.row.current-scope.row.last)/(scope.row.last))*10000)/100).toFixed(2)+'%'}}</div>
                    <div class="item" style="float: right" v-else>--</div>
                    <!--         scope.row.current           -->
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "TheTableData",
        props: {
            tableData: {
                type: Array
            }
        }
    }
</script>

<style scoped lang="stylus">
    .table
        margin 0.2rem 0.3rem
        height: 6.5rem;
        background-color: #ffffff;
        box-shadow: 0.04rem 0.04rem 0.1rem 0 rgba(0, 0, 0, 0.1);
        border-radius: 0.1rem;
        padding 0.1rem
        box-sizing border-box
        overflow-y hidden

    >>>
        .el-table
            background-color #fff
            border none
            tr
                border none
                height 0.73rem
                line-height 0.73rem
            tr:hover>td
                background-color #fff!important
            th
                background-color #fff !important;
                color #000
                height 0.76rem
                line-height 0.76rem
                font-size 0.24rem
                padding 0
            td
                background-color #fff !important;
                color #000
                font-size 0.24rem
                height 0.7rem!important
                line-height 0.7rem !important
                padding 0
                margin 0
            tr:nth-child(odd) td
                border-bottom  0.01rem solid rgba(238, 238, 238, 0.5) !important
            tr:nth-child(even) td
                border-bottom  0.01rem solid rgba(238, 238, 238, 0.9) !important
            td
                margin-right 0.1rem
            td:first-child
                width 0.6rem
                background-color red
            div.item
                padding 0
                img
                    width 0.15rem;
                    height 0.22rem;

</style>